<mat-card>
  <mat-card-content>
    <h2 class="example-h2">Slider configuration</h2>

    <section class="example-section">
      <mat-form-field class="example-margin example-width">
        <mat-label>Value</mat-label>
        <input matInput type="number" [(ngModel)]="value">
      </mat-form-field>
      <mat-form-field class="example-margin example-width">
        <mat-label>Min value</mat-label>
        <input matInput type="number" [(ngModel)]="min">
      </mat-form-field>
      <mat-form-field class="example-margin example-width">
        <mat-label>Max value</mat-label>
        <input matInput type="number" [(ngModel)]="max">
      </mat-form-field>
      <mat-form-field class="example-margin example-width">
        <mat-label>Step size</mat-label>
        <input matInput type="number" [(ngModel)]="step">
      </mat-form-field>
    </section>

    <section class="example-section">
      <mat-checkbox [(ngModel)]="showTicks">Show ticks</mat-checkbox>
    </section>

    <section class="example-section">
      <mat-checkbox [(ngModel)]="thumbLabel">Show thumb label</mat-checkbox>
    </section>

    <section class="example-section">
      <mat-checkbox [(ngModel)]="disabled">Disabled</mat-checkbox>
    </section>
  </mat-card-content>
</mat-card>

<mat-card class="example-result-card">
  <mat-card-content>
    <h2>Result</h2>

    <div class="example-label-container">
      <label id="example-name-label" class="example-name-label">Value</label>
      <label class="example-value-label">{{slider.value}}</label>
    </div>
    <mat-slider
        class="example-margin"
        [disabled]="disabled"
        [max]="max"
        [min]="min"
        [step]="step"
        [discrete]="thumbLabel"
        [showTickMarks]="showTicks">
      <input matSliderThumb [(ngModel)]="value" #slider>
    </mat-slider>
  </mat-card-content>
</mat-card>
